<template>
	<view style="flex: 1;">
		<view style="position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-color: ">
			<image src="@/static/public/background_96E919.png" mode="widthFix" style="width: 750rpx;" />
			<view style="flex: 1;background-color: #F7F7F7;"></view>
		</view>
		<scroll-view style="flex: 1;" scroll-y="true" show-scrollbar="false">
			<view class="head">
				<view class="back">
					<image src="@/static/public/arrow_left_000000.png" mode="heightFix" @click="goBack">
					</image>
				</view>
				<view class="title">
					<view class="text">发布需求</view>
				</view>
				<view class="placeholder"></view>
			</view>
			<view class="from box">
				<view class="tips">
					<view class="tip">您的需求</view>
					<view class="star" style="margin-left: 10rpx;">*</view>
				</view>
				<view class="titleAndContent">
					<view class="content">
						<up-textarea v-model="content" placeholder="请输入内容" height="135rpx" border="none" maxlength="150"
							style="background-color: #F7F7F7;padding: 0;"></up-textarea>
					</view>
					<view class="text">{{content.length}}/150</view>
				</view>
				<view class="picture">
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="3" width="204rpx" height="204rpx"></u-upload>
					<!-- <view class="show">
						<image
							src="https://img2.baidu.com/it/u=246493236,1763577649&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
							mode="aspectFit"></image>
					</view>
					<view class="select-image">
						<image src="@/static/public/camera_ADADAD.png" mode="heightFix"></image>
					</view> -->
				</view>
			</view>
			<view class="way box">
				<view class="tip">选择服务方式</view>
				<view class="onlineAndOffline">
					<view class="online" v-for="(item , index) in service.list">
						<view class="text" @click="servetCilck(item)"
							:style="item.dictCode == service.select.dictCode ? {'background-color' : '#C0F04B'}:{}">
							{{item.dictLabel}}
						</view>
					</view>

					<!-- <view class="offline">
						<view class="text" style="background-color: #C0F04B;">线下</view>
					</view> -->
				</view>
			</view>
			<view class="address box" v-if="service.select.dictValue  == 1">
				<view class="tip">选择地址</view>
				<view class="select" @click="getAddress">
					<image class="image-1" src="@/static/public/address_171717_44D14B.png" mode="heightFix"></image>
					<view class="text">{{address==null?"请选择":address.name}}</view>
					<image class="image-2" src="@/static/public/arrow_right_000000.png" mode="heightFix"></image>
				</view>
				<view class="details">
					<up-input placeholder="请输入详细地址" border="none" v-model="detail"></up-input>
				</view>

			</view>
			<view class="list box">
				<view class="tip">信息列表</view>
				<view class="subclass">
					<view class="star">*</view>
					<view class="subheading">分类</view>
					<view class="value sort" @click="cate.show = true">
						<view class="text">{{cateSelect==null?"请选择":cateSelect.name}}</view>
						<image src="@/static/public/arrow_right_000000.png" mode="heightFix"></image>
					</view>
				</view>
				<view class="subclass">
					<view class="star">*</view>
					<view class="subheading">价格</view>
					<view class="value"><up-input placeholder="请输入内容" border="none" v-model="price" type="number"></up-input></view>
				</view>
				<view class="subclass">
					<view class="star">*</view>
					<view class="subheading">联系人</view>
					<view class="value"><up-input placeholder="请输入内容" border="none" v-model="name"></up-input></view>
				</view>
				<view class="subclass">
					<view class="star">*</view>
					<view class="subheading">性别</view>
					<view class="value sex">
						<view class="text" v-for="(item,index) in sexL.list" @click="sexLClick(item)"
							:style="item.dictCode == sexL.select.dictCode ? {'background-color' : '#C0F04B'}:{'background-color' : '#F4F4F4'}">
							{{item.dictLabel}}
						</view>
					</view>
				</view>
				<view class="subclass">
					<view class="star">*</view>
					<view class="subheading">联系方式</view>
					<view class="value phone"><up-input placeholder="请输入内容" border="none" v-model="phone"></up-input>
					</view>
				</view>
				<view class="subclass" @click="time.show = true">
					<view class="star">*</view>
					<view class="subheading">结束时间</view>
					<view class="value">{{cutoffTime==null?"请选择结束时间":cutoffTime.text}}</view>
				</view>
			</view>
			<view class="agreement">
				<up-checkbox name="agree" usedAlone size="34rpx" shape="circle"
					v-model:checked="aloneChecked"></up-checkbox>
				<view class="text-1">我已阅读</view>
				<view class="text-2">《xxx协议》</view>
			</view>
			<view class="publish">
				<view class="price">
					<view class="num">
						<view class="text-1">￥</view>
						<view class="text-2">{{price==''?0:price}}</view>
					</view>
					<view class="detail">
						<view class="text">明细</view>
						<image src="@/static/public/arrow_under_000000.png" mode="heightFix"></image>
					</view>
				</view>
				<view class="button-1">找人付</view>
				<view class="button-2" @click="submit">立即下单</view>
			</view>
		</scroll-view>

		<up-picker :show="cate.show" :columns="cate.list" keyName="name" @cancel="cate.show = false"
			@confirm="cateClick"></up-picker>
		<up-datetime-picker v-if="time.show" hasInput :show="time.show" v-model="time.date" :minDate="time.minDate"
			:maxDate="time.maxDate" @cancel="time.show = false" @confirm="timeClick"></up-datetime-picker>
	</view>
</template>
<script setup>
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import api from '@/utlis/api.js';
	import { DICT_TYPE, dict } from '@/utlis/dict.js'
	import { uploadFile } from '@/utlis/config.js';

	const user = ref();
	const content = ref("");
	const cateSelect = ref(null);
	const fileList = ref([]);
	const serviceType = ref(0);
	const address = ref(null);
	const detail = ref("");
	const price = ref('');
	const name = ref("");
	const sex = ref(2);
	const phone = ref("");
	const cutoffTime = ref(null);
	const aloneChecked = ref(false);

	const overlay = ref(false);

	const submit = async () => {

		if (!aloneChecked.value) {
			uni.showToast({
				title: "请阅读并勾选协议",
				icon: 'none',
				duration: 2000,
			})
			return;
		}

		if (content.value == '') {
			uni.showToast({
				title: "内容不能为空",
				icon: 'none',
				duration: 2000,
			})
			return;
		}
		if (cateSelect.value == null) {
			uni.showToast({
				title: "请选择分类",
				icon: 'none',
				duration: 2000,
			})
			return;
		}

		if (price.value == '') {
			uni.showToast({
				title: "请输入金额",
				icon: 'none',
				duration: 2000,
			})
			return;
		}



		if (name.value == '') {
			uni.showToast({
				title: "请输入姓名",
				icon: 'none',
				duration: 2000,
			})
			return;
		}
		if (phone.value == '') {
			uni.showToast({
				title: "请输入联系方式",
				icon: 'none',
				duration: 2000,
			})
			return;
		}
		if (cutoffTime.value == null) {
			uni.showToast({
				title: "请选择截止时间",
				icon: 'none',
				duration: 2000,
			})
			return;
		}

		//封面
		let data = {
			content: content.value,
			cateId: cateSelect.value.cateId,
			serviceType: serviceType.value,
			price: price.value,
			name: name.value,
			sex: sex.value,
			phone: phone.value,
			cutoffTime: cutoffTime.value.value
		}

		if (service.value.select.dictValue == 1) {
			if (address.value == null) {
				uni.showToast({
					title: "请选择地址",
					icon: 'none',
					duration: 2000,
				})
				return;
			}

			data.latitude = address.value.latitude;
			data.longitude = address.value.longitude;
			data.address = address.value.name + detail.value
		}

		overlay.value = true;
		let picture = []
		for (let i = 0; i < fileList.value.length; i++) {
			const res = await uploadFile(fileList.value[i].thumb);
			picture.push(res.ossId);
		}

		data.cover = picture.join(",");


		api("app/user/quest/", "POST", data).then(res => {
			uni.showToast({
				title: res.msg,
				icon: 'none',
				duration: 2000,
			})
			overlay.value = false;
			if (res.code == 200) {
				uni.switchTab({ url: "/pages/home/index" });
			}
		}).catch(err => {
			overlay.value = false;
		});
	}

	const afterRead = (event) => {
		fileList.value.push(...event.file);
	}
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
	}

	const sexLClick = (item) => {
		sexL.value.select = item;
		sex.value = item
	}
	const servetCilck = (item) => {
		console.log(item)
		service.value.select = item;
		serviceType.value = item.dictValue;
	}

	const timeClick = (item) => {
		time.value.show = false;
		const date = new Date(item.value);
		// 获取各个部分
		const year = date.getFullYear();
		const month = date.getMonth() + 1; // 月份是从 0 开始的，所以要加 1
		const day = date.getDate();
		const hours = date.getHours();
		const minutes = date.getMinutes();


		cutoffTime.value = {
			text: `${year}年${month}月${day}日 ${hours}时${minutes}分`,
			value: `${year}-${month}-${day} ${hours}:${minutes}:00`,
		}
	}

	const time = ref({
		show: false,
		minDate: 0,
		maxDate: 0,
		date: 0
	})

	const getAddress = () => {
		uni.chooseLocation({
			success: function(res) {
				address.value = res;
				console.log(res)
			}
		})
	}
	const cateClick = (item) => {
		cate.value.show = false;
		cateSelect.value = item.value[0];
	}
	const cate = ref({
		show: false,
		list: []
	})


	const service = ref({
		select: {},
		list: []
	});
	const sexL = ref({
		select: {},
		list: []
	});
	onShow(() => {
		user.value = uni.$store.state.user;
		api("app/home/cate/list", "GET").then(res => {
			cate.value.list[0] = res.data;
		});

		dict(DICT_TYPE.SERVICE_TYPE).then(data => {
			service.value.list = data;
			service.value.select = data[0];

		});
		dict(DICT_TYPE.SYS_USER_SEX).then(data => {
			sexL.value.list = data;
			sexL.value.select = data[0];
			console.log(data)

		});

		time.value.minDate = new Date().getTime();
		time.value.date = time.value.minDate;
		time.value.maxDate = time.value.minDate + (1000 * 60 * 60 * 24 * 5);



	});

	const goBack = () => {
		uni.navigateBack({
			delta: 1
		});
	}
</script>
<style lang="scss">
	@import "@/uni.scss";

	.tip {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 900;
	}

	.star {
		color: red;
		margin-right: 12rpx;
		font-size: 30rpx;
	}

	.box {
		background: #FFFFFF;
		border-radius: 30rpx;
	}

	.head {
		margin: 85rpx 0 0 0;
		display: flex;
		flex-wrap: wrap;



		padding: 0 26rpx 0 26rpx;

		.back,
		.placeholder {
			width: 232rpx;
		}

		.title {
			width: 234rpx;

			.text {
				text-align: center;
				font-size: 36rpx;
			}
		}

		image {
			height: 38rpx;
		}
	}

	.from {
		margin: 22rpx 19rpx 22rpx 21rpx;
		padding: 28rpx 21rpx 28rpx 20rpx;

		.tips {
			display: flex;
			flex-wrap: wrap;

			.tip {
				line-height: 45rpx;
				font-size: 32rpx;
				font-weight: 900;
			}
		}

		.titleAndContent {
			margin: 20rpx 0;
			padding: 25rpx 32rpx 24rpx 28rpx;
			background-color: #F7F7F7;
			border-radius: 28rpx;

			.content {
				margin-top: 10rpx;
			}

			.text {
				line-height: 40rpx;
				font-size: 28rpx;
				color: #979797;
				text-align: right;
			}
		}


		.picture {
			height: 164rpx;
			display: flex;
			flex-wrap: wrap;

			.show {
				margin-right: 20rpx;

				image {
					width: 164rpx;
					height: 164rpx;
					border-radius: 27rpx;
				}
			}

			.select-image {
				margin-right: 20rpx;
				width: 164rpx;
				height: 164rpx;
				background-color: #F6F6F6;
				border-radius: 27rpx;
				text-align: center;
				align-content: center;

				image {
					height: 43rpx;
				}
			}
		}
	}

	.way {
		margin: 0 21rpx 0 19rpx;
		padding: 35rpx 23rpx 26rpx 23rpx;

		.onlineAndOffline {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.online,
			.offline {
				width: 332rpx;
				padding: 0 9rpx;
				box-sizing: border-box;

				.text {
					line-height: 80rpx;
					width: 309rpx;
					border-radius: 12rpx;
					background-color: #EDF2FA;
					text-align: center;
					font-size: 28rpx;
				}
			}

			.online {
				align-items: flex-end;
			}
		}
	}

	.address {
		margin: 20rpx 20rpx 21rpx 20rpx;
		padding: 35rpx 19rpx 30rpx 22rpx;

		.select,
		.details {
			height: 111rpx;
			border-radius: 28rpx;
			margin-top: 20rpx;
			background-color: #F7F7F7;
		}

		.select {
			display: flex;
			flex-wrap: wrap;
			padding: 0 26rpx;
			align-items: center;

			.image-1 {
				height: 40rpx;
			}

			.text {
				margin-left: 22rpx;
				width: 544rpx;
				color: #979797;
				line-height: 40rpx;
				font-size: 28rpx;
			}

			.image-2 {
				height: 21rpx;
			}
		}

		.details {
			padding: 0 20rpx;
			box-sizing: border-box;
			align-content: center;
			color: #D9D9D9;
		}
	}

	.list {
		margin: 0 18rpx 0 22rpx;
		padding: 35rpx 19rpx 59rpx 20rpx;
		box-sizing: border-box;

		.subclass {
			align-items: center;
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			box-sizing: border-box;
		}

		.subheading {
			font-size: 32rpx;
			line-height: 45rpx;
			width: 135rpx;
		}

		.value {
			width: 508rpx;
			height: 76rpx;
			box-sizing: border-box;
			background-color: #F4F4F4;
			border-radius: 49rpx;
			padding-left: 39rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}

		.sort {
			.text {
				line-height: 76rpx;
				width: 442rpx;
			}

			image {
				height: 20rpx;
			}
		}

		.sex {
			background-color: #FFFFFF;
			justify-content: flex-end;

			.text {
				width: 127rpx;
				height: 76rpx;
				border-radius: 38rpx;
				line-height: 76rpx;
				text-align: center;
				margin-left: 20rpx;
				font-size: 32rpx;
			}
		}
	}

	.agreement {
		margin: 231rpx 0;
		display: flex;
		flex-wrap: wrap;
		// height: 37rpx;
		justify-content: center;
		align-items: center;

		.text-1,
		.text-2 {
			line-height: 37rpx;
			font-size: 26rpx;
			color: #252323;
		}

		.text-2 {
			color: #188FFF;
		}
	}

	.publish {
		width: 750rpx;
		height: 157rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		padding: 24rpx 21rpx 37rpx 25rpx;
		display: flex;
		flex-wrap: wrap;

		.price {
			width: 264rpx;
			height: 96rpx;

			.num {
				height: 59rpx;
				display: flex;
				flex-wrap: wrap;

				.text-1 {
					color: #FF0000;
					line-height: 33rpx;
					font-size: 24rpx;
					margin-top: 20rpx;
				}

				.text-2 {
					line-height: 59rpx;
					font-size: 54rpx;
					font-weight: 900;
					color: #FF0000;
				}
			}

			.detail {
				height: 37rpx;
				padding-left: 30rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				.text {
					font-size: 26rpx;
					color: #676767;
				}

				image {
					height: 12rpx;
					margin-left: 8rpx;
				}
			}
		}

		.button-1,
		.button-2 {
			width: 210rpx;
			height: 96rpx;
			margin-left: 10rpx;
			border-radius: 53rpx;
			font-weight: 900;
			text-align: center;
			line-height: 96rpx;
		}

		.button-1 {
			background-color: #000000;
			color: #FFFFFF;
		}

		.button-2 {
			background-image: linear-gradient(to right, #EEFB6E, #93E529);
		}
	}
</style>